@mixin fontMx($fs,$fc,$fw){
    font-size: $fs;
    color: $fc;
    font-weight: $fw;
}
@mixin colorMx($cs){
    $prefix : --ph;
    @each $key,$value in $cs {
        @each $v1 in $value {
            $i : index($value,$v1) ;
            #{$prefix}-#{$key}-#{$i} : $v1;
        }
    }    
}
@mixin blMx($bc) {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: $bc;
}
@mixin tlMx($bc) {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: $bc;
}
@mixin llMx($bc) {
    content: "";
    position: absolute;
    left:0;
    top: 0;
    bottom: 0;
    width: 1px;
    margin: auto;
    background-color: $bc;
}
@mixin rlMx($bc) {
    content: "";
    position: absolute;
    right:0;
    top: 0;
    bottom: 0;
    width: 1px;
    margin: auto;
    background-color: $bc;
}
@mixin disabledMx {
    background-color: var(--ph-bg-disabled)!important;
    color: var(--ph-c-disabled)!important;
    cursor: not-allowed!important;
}
@mixin input {
    flex: 1;
    border-radius: var(--ph-ip-br);
    border-color: var(--ph-ip-bc);
    border-bottom-color: var(--ph-ip-bbc);
    border-left-width: var(--ph-ip-bdl-w);
    border-right-width: var(--ph-ip-bdr-w);
    font-size: var(--ph-ip-fs);
    height: var(--ph-ip-h);
    color: var(--ph-ip-c);
    background-color: var(--ph-ip-bg);
    background-clip: padding-box;
    padding: 0 12px;
    width: 0;
    
    &::-webkit-input-placeholder{
        color: var(--ph-c-l2);
    }
    &:disabled::-webkit-input-placeholder{
        color: var(--ph-ip-c);
    }
}